<script setup>
import { onMounted, ref } from "vue";
import { Application, Container, Graphics, Text, TextStyle } from "pixi.js";
import { gsap } from "gsap";

const props = defineProps({
  onLogin: Function,
});

const emit = defineEmits(["login"]);

const gameContainer = ref(null);
const app = ref(null);
const loginForm = ref(null);
const username = ref("");
const password = ref("");
const particles = ref([]);

const gameWidth = window.innerWidth;
const gameHeight = window.innerHeight;

onMounted(async () => {
  initGame();
  createLoginForm();
  animate();
});

const initGame = async () => {
  // 创建PIXI应用
  app.value = new Application({
    width: gameWidth,
    height: gameHeight,
    backgroundColor: 0x000000,
    antialias: true,
    resolution: window.devicePixelRatio || 1,
    autoDensity: true,
  });

  // 等待初始化完成
  await app.value.init();

  // 添加到DOM
  gameContainer.value.appendChild(app.value.canvas);

  // 创建粒子
  createParticles();
};

const createParticles = () => {
  // 创建100个粒子
  for (let i = 0; i < 100; i++) {
    const particle = new Graphics();
    const size = Math.random() * 3;
    particle.beginFill(0xffffff, 0.5);
    particle.drawCircle(0, 0, size);
    particle.endFill();

    // 随机位置
    particle.x = Math.random() * gameWidth;
    particle.y = Math.random() * gameHeight;

    // 随机速度
    particle.vx = (Math.random() - 0.5) * 2;
    particle.vy = (Math.random() - 0.5) * 2;

    particles.value.push(particle);
    app.value.stage.addChild(particle);
  }
};

const animate = () => {
  // 更新粒子位置
  particles.value.forEach((particle) => {
    particle.x += particle.vx;
    particle.y += particle.vy;

    // 边界检查
    if (particle.x < 0) particle.x = gameWidth;
    if (particle.x > gameWidth) particle.x = 0;
    if (particle.y < 0) particle.y = gameHeight;
    if (particle.y > gameHeight) particle.y = 0;
  });

  // 继续动画循环
  requestAnimationFrame(animate);
};

const handleLogin = () => {
  if (username.value && password.value) {
    emit("login", {
      username: username.value,
      password: password.value,
    });
  }
};

const createLoginForm = () => {
  // 创建登录表单容器
  const formContainer = new Container();
  formContainer.position.set(gameWidth / 2, gameHeight / 2);

  // 创建背景
  const background = new Graphics();
  background.beginFill(0x000000, 0.7);
  background.drawRoundedRect(-150, -200, 300, 400, 20);
  background.endFill();

  // 创建标题
  const titleStyle = new TextStyle({
    fontFamily: "Arial",
    fontSize: 24,
    fill: 0xffffff,
    align: "center",
  });

  const title = new Text({
    text: "游戏登录",
    style: titleStyle,
  });
  title.anchor.set(0.5);
  title.position.set(0, -150);

  formContainer.addChild(background);
  formContainer.addChild(title);

  app.value.stage.addChild(formContainer);
};
</script>

<template>
  <div class="game-login">
    <div ref="gameContainer" class="game-container"></div>
    <div class="login-form" ref="loginForm">
      <div class="form-group">
        <input
          type="text"
          v-model="username"
          placeholder="用户名"
          class="input"
        />
      </div>
      <div class="form-group">
        <input
          type="password"
          v-model="password"
          placeholder="密码"
          class="input"
        />
      </div>
      <button @click="handleLogin" class="login-button">登录</button>
    </div>
  </div>
</template>

<style scoped>
.game-login {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.game-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.login-form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  padding: 40px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.form-group {
  margin-bottom: 20px;
}

.input {
  width: 100%;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  font-size: 16px;
  outline: none;
  transition: all 0.3s ease;
}

.input:focus {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.2);
}

.login-button {
  width: 100%;
  padding: 12px;
  background: #4a90e2;
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.login-button:hover {
  background: #357abd;
  transform: translateY(-2px);
}

.login-button:active {
  transform: translateY(0);
}
</style>
